Fix scroll/focus shift on htmx navigation#416
Fix scroll/focus shift on htmx navigation#416renderorange wants to merge 1 commit intobestpractical:6.0-trunkfrom
Conversation
When htmx performs boosted navigation (full-page content swap), it defaults to scrolling the viewport to show the new content via scrollIntoViewOnBoost. Combined with RT's menu expansion on htmx:afterSettle, this causes the viewport to jump around unexpectedly after navigation. This fix: 1. Disables htmx's automatic scrollIntoViewOnBoost behavior 2. Adds explicit scroll-to-top only for body-target swaps (boosted nav), not for widget/element reloads which should preserve scroll position
|
also, hi <3 |
|
Hi @renderorange ! Could you suggest a couple of examples or steps where you see the bad scroll? I just want to make sure I can see the before/after. Any particular browser? For the code, we also moved event listeners to a new init.js file to better control the load order. |
so, I'm working on building a new theme extension and it's happening there. perhaps I should just overlay in there instead of submitting to core?
I'll keep that in mind if I have anything else to submit PRs for. Hope things are well for y'all, please tell everyone hi for me. |
If it's something you could share so we could see it, we might still consider an update in core. I have noticed some strange scroll at some points as well, but I'm having a hard time nailing down exactly the sequence that leads to scrolling to unexpected places. That said, you can absolutely override in your extension just to get things working smoothly for your project. We have also been trying to move more toward keying everything off of the bootstrap primary/secondary/tertiary variables to make it easier to create themes. It still needs some work to fully get there.
Will do! |
yeah, it's just for funzies for my personal RT server, nothing I can't share. https://github.com/renderorange/rt-extension-lumen the issue for me was when I forced reloaded pages, which would trigger htmlx, which would then scroll down to an element not at the top, which would make the top of the page not at the top.
awesome, good to know. yeah, I tried to do that within my theme CSS too. |
2 participants
When htmx performs boosted navigation (full-page content swap), it defaults to scrolling the viewport to show the new content via scrollIntoViewOnBoost.
Combined with RT's menu expansion on htmx:afterSettle, this causes the viewport to jump around unexpectedly after navigation.
This fix: